 /* ==========================================================================
   Gallery

   Override styles of Gallery widget
========================================================================== */
 @mixin grid-items($number, $suffix) {
     @for $i from 1 through $number {
         &.widget-gallery-#{$suffix}-#{$i} {
             grid-template-columns: repeat($i, 1fr);
         }
     }
 }

 @mixin grid-span($number, $type) {
     @for $i from 1 through $number {
         .widget-gallery-#{$type}-span-#{$i} {
             grid-#{$type}: span $i;
         }
     }
 }

 .widget-gallery {
     .widget-gallery-items {
         display: grid;
         grid-gap: $spacing-small;

         /*
         Desktop widths
         */
         @media screen and (min-width: $screen-lg) {
             @include grid-items(12, "lg");
         }

         /*
         Tablet widths
         */
         @media screen and (min-width: $screen-md) and (max-width: ($screen-lg - 1px)) {
             @include grid-items(12, "md");
         }

         /*
         Phone widths
         */
         @media screen and (max-width: ($screen-md - 1)) {
             @include grid-items(12, "sm");
         }
     }

     .widget-gallery-clickable {
         cursor: pointer;

         &:focus:not(:focus-visible) {
             outline: none;
         }

         &:focus-visible {
             outline: 1px solid $brand-primary;
         }
     }

     .infinite-loading {
         overflow: auto;
     }

     .widget-gallery-filter,
     .widget-gallery-empty,
     .widget-gallery-pagination {
         flex: 1;
     }

     /**
     Helper classes
      */
     @include grid-span(12, "column");
     @include grid-span(12, "row");
 }
